<template>
  <div class="flex min-h-screen items-center justify-center bg-[#f5f7fa] px-4">
    <div class="text-center">
      <!-- 404图标 -->
      <div class="mb-8 text-[#409EFF]">
        <svg
          class="mx-auto h-40 w-40"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M13 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V11"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M7.5 15.5L9.5 13.5M9.5 15.5L7.5 13.5"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
          />
          <path
            d="M14.5 15.5L16.5 13.5M16.5 15.5L14.5 13.5"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
          />
          <path
            d="M21 3L13 11M21 3H17M21 3V7"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>

      <!-- 错误信息 -->
      <h1 class="mb-4 text-6xl font-bold text-[#303133]">404</h1>
      <p class="mb-8 text-xl text-[#606266]">抱歉，您访问的页面不存在</p>

      <!-- 操作按钮 -->
      <div class="space-x-4">
        <el-button type="primary" @click="goBack"> 返回上一页 </el-button>
        <el-button @click="goHome"> 返回首页 </el-button>
      </div>

      <!-- 提示信息 -->
      <p class="mt-8 text-sm text-[#909399]">
        如果您认为这是一个错误，请联系管理员
      </p>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'

const router = useRouter()
const userStore = useUserStore()

// 返回上一页
const goBack = () => {
  router.back()
}

// 返回首页
const goHome = () => {
  // 根据用户角色跳转到对应的首页
  const role = userStore.role
  if (role === 'teacher') {
    router.push('/teacher/home')
  } else if (role === 'student') {
    router.push('/student/home')
  } else {
    router.push('/login')
  }
}
</script>

<style scoped>
/* 添加按钮悬浮动画 */
.el-button {
  transition: transform 0.2s;
}

.el-button:hover {
  transform: translateY(-2px);
}

/* 添加图标动画 */
svg {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
</style>
